<template>
  <div>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button icon="plus" type="primary" @click="handleAdd">新增</a-button>
      </div>

      <!-- table区域-begin -->
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>

        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :expandedRowKeys="expandedRowKeys"
          :loading="loading"
          :pagination="false"
          :rowSelection="{ fixed: true, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          size="middle"
        >
          <template slot="statusSlot" slot-scope="text, record">
            <li v-show="record.state === 'online'">
              <a-icon :title="record.stateText" style="color:green;" theme="filled" type="check-circle" />
              在线
            </li>
            <li v-show="record.state === 'notActive'">
              <a-icon :title="record.stateText" style="color:gray" theme="filled" type="close-circle" />
              未激活
            </li>
            <li v-show="record.state === 'offline'">
              <a-icon :title="record.stateText" style="color:red" theme="filled" type="exclamation-circle" />
              离线
            </li>
          </template>
          <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)">查看</a>
          <a-divider type="vertical" />
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a-popconfirm @confirm="setStatus(record.id)">
            <p slot="title">确定执行{{ record.state === 'notActive' ? '激活' : '注销' }}操作吗?</p>
            <a>{{ record.state === 'notActive' ? '激活' : '注销' }}</a>
          </a-popconfirm>
        </span>
        </a-table>
      </div>
      <DeviceAlarmConfigModal ref="modalForm" @ok="modalFormOk"></DeviceAlarmConfigModal>
    </a-card>
  </div>
</template>

<script>
export default {
name: "ActuatorList"
}
</script>

<style scoped>

</style>
